<template>
  <div>
    <div>
      <el-page-header
        content="预约详情"
        style="padding-top: 25px; padding-left: 25px"
        @back="$emit('go')"
      />
    </div>

    <div style="display: flex">
      <!-- <div style="width: 30%; height: 70vh"> -->
      <el-card class="box-card" style="width: 30%; height: 70vh">
        <div slot="header" class="clearfix">
          <span>预约详情</span>
          <el-button style="float: right; padding: 3px 0" type="text">
            就诊记录
          </el-button>
        </div>
        <!-- 用户信息 -->
        <div
          class="text item"
          style="border-bottom: 1px solid #1890ff; padding-bottom: 10px"
        >
          姓名：{{ datas.customer_name }}
        </div>

        <div
          class="text item"
          style="border-bottom: 1px solid #1890ff; padding-bottom: 10px"
        >
          预约日期：{{ datas.res_date }}
        </div>
        <div
          class="text item"
          style="border-bottom: 1px solid #1890ff; padding-bottom: 10px"
        >
          预约医生：{{ datas.res_user_name }}
        </div>
      </el-card>

      <el-card
        class="box-card"
        style="width: 70%; overflow-x: hidden; overflow-y: scroll"
      >
        <div slot="header" class="clearfix">
          <span>接诊详情</span>
          <el-button style="float: right; padding: 3px 0" type="text">
            科室套餐
          </el-button>
          <div style="margin-top: 10px">
            <div>
              <el-collapse v-model="activeNames">
                <el-collapse-item
                  v-for="(items, index) in objs"
                  :key="index"
                  name="1"
                  :title="items.type_name"
                >
                  <div v-for="(itemse, k) in items.item" :key="k">
                    <div>
                      <div style="">
                        <el-form
                          ref="ruleForm"
                          class="demo-ruleForm"
                          status-icon
                        >
                          <el-form-item :label="itemse.item_name" prop="pass">
                            <div v-if="itemse.data_type == 'input_file'">
                              <el-image
                                v-if="itemse.default_value"
                                :preview-src-list="[itemse.default_value]"
                                :src="itemse.default_value"
                                style="width: 100px; height: 100px"
                              />
                            </div>
                            <div v-else>
                              {{ itemse.default_value }}
                            </div>
                          </el-form-item>
                        </el-form>
                      </div>
                    </div>
                  </div>
                </el-collapse-item>
              </el-collapse>
              <el-button
                style="margin-left: 49%; margin-top: 20px"
                @click="onSubmit"
              >
                审核通过
              </el-button>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
  // customerCaseDetail
  import { customerCaseDetail, customerCaseCheck } from '@/api/caseChecks'

  //
  export default {
    props: {
      datas: {
        type: Object,
        required: true,
      },
    },
    data() {
      return {
        activeNames: ['1'],
        objs: [],
        resDate: [],
        ks: '',
        template_id: '',
        type: '',
      }
    },
    mounted() {
      this.init()
      console.log(this.datas)
    },
    methods: {
      init() {
        const data = {
          id: this.datas.id,
        }
        customerCaseDetail(data).then((e) => {
          console.log(e)
          this.objs = e.data
        })
        console.log(this.objs)
      },
      onSubmit() {
        this.$confirm('此操作将通过审核, 是否继续?', '提示', {
          confirmButtonText: '审核通过',
          cancelButtonText: '审核取消',
          type: 'warning',
        })
          .then(() => {
            const data = {
              id: this.datas.id,
              is_check: 'Y',
            }
            customerCaseCheck(data).then(() => {
              this.$emit('go')
              this.$message({
                type: 'success',
                message: '通过!',
              })
            })
          })
          .catch(() => {
            const data = {
              id: this.datas.id,
              is_check: 'N',
            }
            customerCaseCheck(data).then(() => {
              this.$emit('go')
              this.$message({
                type: 'info',
                message: '取消',
              })
            })
          })
      },
    },
  }
</script>

<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }
  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 480px;
  }
</style>
